<template>
    <div class="wrapper">
        <el-card>
            <div class="rowDiv">
                <div class="row-left">
                    <div class="row-item mar-right">
                        存储分类：
                        <el-select
                                v-model="state.save_type"
                                placeholder="选择存储分类"
                                @change="getGoodsDataFun"
                        >
                            <el-option label="常温" value="1"></el-option>
                            <el-option label="冷冻" value="2"></el-option>
                        </el-select>
                    </div>
                    <div class="row-item mar-right">
                        商品分类：
                        <el-select
                                v-model="state.goods_type"
                                placeholder="选择商品分类"
                                @change="getGoodsDataFun"
                        >
                            <el-option value="0" label="全部" ></el-option>
                            <template
                                    v-for="(item, index) in state.goodsTypeArr"
                                    :key="index"
                            >
                                <el-option
                                        :value="item.id"
                                        :label="item.name"
                                ></el-option>
                            </template>
                        </el-select>

                    </div>
                    <div class="row-item mar-right">
                        采购类型：
                        <el-select
                                v-model="state.purchase_type"
                                placeholder="选择采购类型"
                                @change="getGoodsDataFun"
                        >
                            <el-option label="总店直供" value="1"></el-option>
                            <el-option label="门店自采" value="2"></el-option>
                        </el-select>
                    </div>
                    <div class="row-item">
                        计费方式：
                        <el-select
                                v-model="state.charging_mode"
                                placeholder="选择计费方式"
                        >
                            <el-option label="标品" value="1"></el-option>
                            <el-option label="称重" value="2"></el-option>
                        </el-select>
                    </div>
                </div>

                <div class="row-right">
                    <el-button size="small" type="primary" @click="new_set_ware" class="mar-right"
                    >创建原料商品
                    </el-button
                    >
                    <searchDiv :placeholder="state.placeholder" @searchClick="searchClick"></searchDiv>
                </div>
            </div>
            <el-table :data="state.tableData" style="width: 100%; margin-top: 20px">
                <el-table-column prop="id" label="商品编码(ID)"></el-table-column>
                <el-table-column label="原料商品图" v-slot="scope">
                    <img :src="scope.row.goods_img" class="goods_img"/>
                </el-table-column>
                <el-table-column prop="name" label="原料商品名称">
                </el-table-column>
                <el-table-column prop="carton" label="箱规"></el-table-column>
                <el-table-column prop="pocket" label="袋规"></el-table-column>
                <el-table-column prop="weight" label="箱重"></el-table-column>
                <el-table-column prop="stock" label="库存"></el-table-column>
                <el-table-column prop="charging_mode" label="计算方法"></el-table-column>
                <el-table-column prop="goods_type" label="商品分类"></el-table-column>
                <el-table-column prop="save_type" label="存储类型"></el-table-column>
                <el-table-column prop="purchase_type" label="采购类型"></el-table-column>
                <el-table-column prop="des" label="描述"></el-table-column>
                <el-table-column label="状态" v-slot="scope">
                    <el-switch
                            v-model="scope.row.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            @click="statusChangeFun(scope.row)"
                    >
                    </el-switch>
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template #default="scope">
                        <div class="optionDiv">
                            <el-button
                                    @click.native.prevent="editRow(scope.row)"
                                    type="text"
                                    size="small"
                            >
                                编辑
                            </el-button>
                            <el-button
                                    @click.native.prevent="deleteRow(scope.row)"
                                    type="text"
                                    size="small"
                            >
                                删除
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!--页码-->
            <el-row type="flex" class="row-bg" justify="end">
                <el-col :span="12">
                    <Page v-if="state.totalPage" :totalPage="state.totalPage" @changePage="changePage"></Page>
                </el-col>
            </el-row>
            <!-- 新建原料商品 -->
            <el-dialog
                    title="创建原料商品"
                    v-model="state.new_dialogVisible"
                    width="25%"
                    center
            >
        <span>
          <el-form
                  :model="state.set_form"
                  :rules="state.rules"
                  ref="form"
                  label-width="100px"
                  class="demo-ruleForm"
          >
            <el-form-item label="原料图片">
              <el-upload
                      class="avatar-uploader"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload"
              >
                <img
                        v-if="state.set_form.imageUrl"
                        :src="state.set_form.imageUrl"
                        class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="原料名称" prop="name">
              <el-input v-model="state.set_form.name"></el-input>
            </el-form-item>
            <el-form-item label="计费方式" prop="charging_mode">
                  <el-radio v-model="state.set_form.charging_mode" label="1">标品</el-radio>
                  <el-radio v-model="state.set_form.charging_mode" label="2">称重</el-radio>
            </el-form-item>
            <el-form-item label="原料袋规" prop="pocket">
              <el-col :span="13">
                <el-input v-model="state.set_form.pocket"></el-input>
              </el-col>
              <el-col :span="11">
                <el-select v-model="state.set_form.pocket_unit">
                  <template
                          v-for="(item, index) in state.pocketArr"
                          :key="index"
                  >
                    <el-option
                            :value="item.id"
                            :label="item.name"
                    ></el-option>
                  </template>
               </el-select>
              </el-col>
            </el-form-item>
            <el-form-item label="原料箱规" prop="carton">
              <el-col :span="13">
                <el-input v-model="state.set_form.carton"></el-input>
              </el-col>
              <el-col :span="11">
                <el-select v-model="state.set_form.carton_unit">
                  <template
                          v-for="(item, index) in state.pocketArr"
                          :key="index"
                  >
                    <el-option
                            :value="item.id"
                            :label="item.name"
                    ></el-option>
                  </template>
               </el-select>
              </el-col>
            </el-form-item>
            <el-form-item label="原料箱重" prop="goods_weight">
              <el-input v-model="state.set_form.goods_weight"></el-input>
            </el-form-item>
            <el-form-item label="原料分类" prop="goods_type">
              <el-select v-model="state.set_form.goods_type">
                  <template
                          v-for="(item, index) in state.goodsTypeArr"
                          :key="index"
                  >
                    <el-option
                            :value="item.id"
                            :label="item.name"
                    ></el-option>
                  </template>
               </el-select>
            </el-form-item>
            <el-form-item label="存储类型" prop="save_type">
                  <el-radio v-model="state.set_form.save_type" label="1">常温</el-radio>
                  <el-radio v-model="state.set_form.save_type" label="2">冷冻</el-radio>
            </el-form-item>
            <el-form-item label="采购类型" prop="purchase_type">
                  <el-radio v-model="state.set_form.purchase_type" label="1">总部直供</el-radio>
                  <el-radio v-model="state.set_form.purchase_type" label="2">门店自采</el-radio>
            </el-form-item>
              <el-form-item label="商品描述" prop="des">
                  <el-input
                          type="textarea"
                          v-model="state.set_form.des"
                          placeholder="请输入商品描述"
                  ></el-input>
            </el-form-item>
          </el-form>
        </span>
                <template #footer>
          <span class="dialog-footer">
            <el-button @click="close()">取 消</el-button>
            <el-button type="primary" @click="submit_create">确 定</el-button>
          </span>
                </template>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
    import {ref, reactive, getCurrentInstance, onMounted} from "vue";
    import {useRouter} from "vue-router";
    import searchDiv from '@/components/Search.vue'
    import Page from '@/components/Pagination.vue';
    import {ElNotification} from "element-plus";

    export default {
        name:"row_manager",
        components: {searchDiv, Page},
        props: {},
        setup() {
            let form = ref("null");
            const router = useRouter();
            const {ctx} = getCurrentInstance();
            let state = reactive({
                totalPage: 12,
                new_dialogVisible: false,
                save_type: "",//存储分类 冷冻 常温
                goods_type: '0',//商品分类  卤味
                purchase_type: '',//采购类型 门店自采 总店直供
                charging_mode: '',//计费方式  标品/称重
                placeholder: '请输入名称',
                pocketArr: [ //原料袋规--单位
                    {id: 1, name: '千克'},
                    {id: 2, name: '个'},
                    {id: 3, name: '袋'},
                    {id: 4, name: '箱'},
                    {id: 5, name: '瓶'},
                    {id: 6, name: '毫升'},
                    {id: 7, name: '只'},
                    {id: 8, name: '把'},
                    {id: 9, name: '盒'},
                    {id: 10, name: '叠'},
                    {id: 11, name: '捆'},
                    {id: 12, name: '斤'},
                ],
                goodsTypeArr: [ //原料分类
                    {id: 1, name: '卤味'},
                    {id: 2, name: '物料'},
                    {id: 3, name: '其他'},
                ],
                set_form: {
                    imageUrl: "",//商品图片
                    name: "",//原料名称
                    charging_mode: '1',//计费方式
                    pocket: '',//原料袋规
                    pocket_unit: 1,//袋规单位
                    carton: '',//原料箱规
                    carton_unit: 1,//箱规单位
                    goods_weight: '',//原料箱重
                    goods_type: 1,//原料分类
                    save_type: '1',//存储类型
                    purchase_type: '1',//采购类型
                    des: "",//商品描述
                },
                rules: {
                    name: [
                        {required: true, message: "请填写原料名称", trigger: "blur"},
                    ],
                    pocket: [
                        {required: true, message: "请填写原料袋规", trigger: "blur"},
                    ],
                    carton: [
                        {required: true, message: "请填写原料箱规", trigger: "blur"},
                    ],
                    goods_weight: [
                        {required: true, message: "请填写原料箱重", trigger: "blur"},
                    ],
                },
                tableData: [
                    {
                        id: 1,
                        goods_img: 'https://test1.instore.cn/media/img/2020/06/0b838ae58d94dcb7ea9b303ed375e4275683944afaaac865e5fb6dc61055b463.jpg',
                        name: "原料商品名称1",
                        carton: "箱规",
                        pocket: "袋规",
                        weight: "箱重",
                        stock: '库存',
                        charging_mode: '计算方法',
                        goods_type: '商品分类',
                        save_type: '存储类型',
                        purchase_type: '采购类型',
                        des: '描述',
                        status: true
                    }, {
                        id: 2,
                        goods_img: 'https://test1.instore.cn/media/img/2020/06/0b838ae58d94dcb7ea9b303ed375e4275683944afaaac865e5fb6dc61055b463.jpg',
                        name: "原料商品名称2",
                        carton: "箱规",
                        pocket: "袋规",
                        weight: "箱重",
                        stock: '库存',
                        charging_mode: '计算方法',
                        goods_type: '商品分类',
                        save_type: '存储类型',
                        purchase_type: '采购类型',
                        des: '描述',
                        status: false
                    }
                ],
            });
            onMounted(() => {
                // 暂时没有接口
                // getGoodsDataFun();
            });
            //获取数据
            function getGoodsDataFun() {
                ElNotification.success('等待接口');
            }

            //改变状态
            function statusChangeFun(item) {
                var id = item.id;
                var status = item.status;
                console.log(id, status)
            }

            // 原料图片
            function handleAvatarSuccess() {
                console.log('handleAvatarSuccess')
            }

            // 原料图片
            function beforeAvatarUpload() {
                console.log('beforeAvatarUpload')
            }


            // 通过审核
            function allow_order() {
                state.order_dialogVisible = false;
            }

            // 关闭弹窗--并清除表单信息
            function close() {
                state.new_dialogVisible = false;
            }

            // 编辑
            function editRow(item) {
                console.log(item)
                state.new_dialogVisible = true;
                state.set_form = {
                    imageUrl: item.goods_img,//商品图片
                    name: item.name,//原料名称
                    charging_mode: '1',//计费方式
                    pocket: item.pocket,//原料袋规
                    pocket_unit: 4,//袋规单位
                    carton: item.carton,//原料箱规
                    carton_unit: 1,//箱规单位
                    goods_weight: item.weight,//原料箱重
                    goods_type: 2,//原料分类
                    save_type: '2',//存储类型
                    purchase_type: '1',//采购类型
                    des: item.des,//商品描述
                }
            }

            // 查看详情
            function detailRow(idx, data) {
                console.log(idx.row.date);
                router.push({path: "/order_detail", query: {id: idx.row.date}});
            }

            // 删除
            function deleteRow(index, rows) {
                if (confirm("是否要取消?")) {
                }
            }

            // 打开新建弹窗
            function new_set_ware() {
                state.new_dialogVisible = true;
                state.set_form={
                    imageUrl: "",//商品图片
                        name: "",//原料名称
                        charging_mode: '1',//计费方式
                        pocket: '',//原料袋规
                        pocket_unit: 1,//袋规单位
                        carton: '',//原料箱规
                        carton_unit: 1,//箱规单位
                        goods_weight: '',//原料箱重
                        goods_type: 1,//原料分类
                        save_type: '1',//存储类型
                        purchase_type: '1',//采购类型
                        des: "",//商品描述
                }
            }

            function searchClick(searchCon) {
                console.log("子组件", searchCon)
            }

            //页码
            function changePage() {

            }

            function submit_create() {
                form.value.validate((valid) => {
                    if (valid) {
                        var data = state.set_form;
                        console.log(data)
                        close();
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            }

            // 创建仓库
            return {
                form,
                state,
                editRow,
                detailRow,
                deleteRow,
                new_set_ware,
                close,
                submit_create,
                allow_order,
                searchClick,
                changePage,
                handleAvatarSuccess,
                beforeAvatarUpload,
                statusChangeFun,
                getGoodsDataFun,
            };
        },
    };
</script>
<style lang="scss" scoped>
    .wrapper {
        height: 100%;
        .el-card {
            height: 100%;
            .cart-title::before {
                content: " ";
                width: 4px;
                height: 20px;
                background: #1890ff;
                background: #1890ff;
                display: inline-block;
                vertical-align: middle;
                margin-right: 5px;
            }
            .rowDiv {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                .row-left {
                    display: flex;
                    width: 70%;
                    justify-content: space-between;
                    .row-item {
                        display: flex;
                        align-items: center;
                        white-space: nowrap;
                    }
                }
                .row-right {
                    display: flex;
                    justify-content: flex-end;
                }
                .mar-right {
                    margin-right: 15px;
                }
            }
            .el-table /deep/ th {
                background-color: #eaeaea;
                text-align: center;
            }
            .el-table /deep/ td {
                text-align: center;
            }
            .el-select {
                width: 100%;
            }
        }
        .optionDiv {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409eff;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 128px;
            height: 128px;
            line-height: 128px;
            text-align: center;
            border: 1px dashed gainsboro;
        }
        .avatar {
            width: 128px;
            height: 128px;
            display: block;
        }
        .row-bg {
            margin-top: 10px;
        }
        .goods_img {
            width: 40px;
            height: 40px;
        }
    }
</style>